<template>
    <div class="container-fluid p-0">
				<div class="row no-gutters  ml_mr mt_mb_20">
						<div class="col-6">
							<a href="#"><img class="img_60" src="https://huaduocai.oss-cn-qingdao.aliyuncs.com/hdc_pc_images/logo.jpg"></a>
					  	<span class="span_font">欢迎登录</span>
						</div>
						<div class="col-6 text-right">
							<img src="https://cdn.huaduocai.net/hdc_pc_images/hdc-webtel.png">
						</div>
			</div>
			<div class="back_color position-relative">
			<div class="position-absolute position div_">
				<div class="mpxy">
					<p class="font-weight-bold">密码登录</p>
					<div class="d-flex justify-content-around">
						<input class="input_w_h" type="type" name=""  id="uname" placeholder="用户名" value="" /><br>
						<span id="msg_uname"></span>
					</div>
					<div class="pt-3">
						<input class="input_w_h" type="type" name=""   id="upwd" placeholder="密码" value="" /><br>
						<span id="msg_upwd"></span>
					</div>
					<div id="d1" class="pt-3">
						<button class="bottom_a  aaaaa" style="outline: 0;" onclick="show()">登录</button>
					</div>
					<div class="pt-3 text-right">
						<a class="a_12_aaa" href="#">忘记密码</a>
						<a class="a_12_aaa" href="#">立即注册</a>
					</div>
					<div>
						<a class="a_12_aaa" href="#"><img src="http://web.huaduocai.net/assets/images/qq2.png">QQ</a>
						<a class="a_12_aaa" href="#"><img src="http://web.huaduocai.net/assets/images/weixin2.png">weChat</a>
					</div>
				</div>
				</div>
			</div>
			</div>
</template>
<style  scoped>
   .ml_mr{margin-left: 302.5px;margin-right: 302.5px;}
.img_60{width: 60px;height: 60px;}
.mt_mb_20{margin-top: 20px;margin-bottom: 20px;}
.span_font{font-size: 24px;margin-left: 20px;}
.mt_mb_20{margin-top: 20px;margin-bottom: 20px;}
.back_color{background-image: url(https://cdn.huaduocai.net/Storage/project/124500816475527210.jpg);height: 490px;}
.position{
	right: 263px;
}
.div_{width: 380px;height: 301px;background-color: #ffffff;margin-top: 45px;padding: 20px 40px;box-shadow:  0 -1px 8px 3px #ccc;}
.input_w_h{width: 300px;height: 42px;border: 0.8px solid #ccc;outline: 0;}
.bottom_a{width: 300px;height: 42px;background-color: #FF4466;border: 0.8px solid #ccc;}
.aaaaa{color: #FFFFFF;}
.aaaaa:hover{color: #FFFFFF;text-decoration: none;}
.a_12_aaa{font-size: 12px;color: #ccc;}
.a_12_aaa:hover{color: #FF4466;text-decoration: none;}
</style>